<script setup>
import { ref, reactive, computed } from "vue";
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue';

console.log('生命周期:setup');

onBeforeMount(() => {
  console.log('生命周期:onBeforeMount');
});
onMounted(() => {
  console.log('生命周期:onMounted');
});
onBeforeUpdate(() => {
  console.log('生命周期:onBeforeUpdate');
});
onUpdated(() => {
  console.log('生命周期:onUpdated');
});
onBeforeUnmount(() => {
  console.log('生命周期:onBeforeUnmount');
});
onUnmounted(() => {
  console.log('生命周期:onUnmounted');
});

const message = ref('Welcome to OSU!');
const rawHtml = ref('<span style="color: red;">浮点式OSU!</span>');
const url = ref('https://www.baidu.com');
const num = ref(0);


const myclass = {
  name: '22bigdata1',
  school: 'qvtu'
};

const myclassReactive = reactive(myclass);
console.log(myclass);
console.log(myclassReactive);
console.log(myclassReactive == myclass);

const movieA = reactive({
  name: '哪吒之魔童闹海',
  piaofang: 100,
  shouzhong: '很广',
  juqing: '有趣',
  texiao: '绚丽'
});

function hello() {
  console.log('hello');
}
function increase() {
  num.value++;
}
function down() {
  num.value--;
}

const movieIsSuccess = computed(() => {
  console.log('=======计算属性被调用了=========');
  return movieA.shouzhong == '很广' && movieA.juqing == '有趣' && movieA.texiao == '绚丽'
    ? '成功的'
    : '一般的';
});

function movieIsSuccessFun() {
  console.log('=======方法被调用了=========');
  return movieA.shouzhong == '很广' && movieA.juqing == '有趣' && movieA.texiao == '绚丽'
    ? '成功的'
    : '一般的';
}

function adjustMovie() {
  movieA.piaofang = 200;
}
function submit() {
  console.log('***');
}

const test = ref('Hello');

// 定义 Chinese、Math 和 English
const Chinese = ref(0);
const Math = ref(0);
const English = ref(0);
const score = ref(0);
const student = reactive([
  {id:22111105,name:'bigdata',live:'2312',score:90},
  {id:22111106,name:'博丽灵梦',live:'2003',score:85},
  {id:22111107,name:'战争雷霆',live:'2004',score:80},
  {id:22111108,name:'waitting for titan fall',live:'2016',score:75},
  {id:22111109,name:'战地风云',live:'2016',score:70},
  {id:22111110,name:'萌娘百科',live:'2017',score:65},
  {id:22111111,name:'arcaea',live:'2018',score:60},
  {id:22111112,name:'LOOP',live:'2025',score:55},
])
const studentKeys = reactive({
  id:"学号",
  name:"姓名",
  live:"宿舍",
  score:"成绩",
})


const computedSum = computed(() => {
  return Chinese.value + Math.value + English.value;
});

const computedAverag = computed(() => {
  return (Chinese.value + Math.value + English.value) / 3;
});
</script>

<template>
  <h1>{{ message }}</h1>
  <p v-show="false">Using text interpolation: {{ rawHtml }}</p>
  <p v-show="true">Using v-html directive: <span v-html="rawHtml"></span></p>
  <a :href="url">www.baidu.com</a>
  <div><a :click="console.log('OSU!')">Welcome to</a></div>
  <button @click="hello()">OSU!</button>
  <h1>{{ num }}</h1>
  <div>
    <button @click="increase()">note</button>
    <span><button @click="down()">down</button></span>
  </div>

  <p>
    使用JS表达式：电影{{ movieA.name }}是：{{
      movieA.shouzhong == '很广' && movieA.juqing == '有趣' && movieA.texiao == '绚丽'
        ? '成功的'
        : '一般的'
    }}
  </p>
  <p>使用计算属性：电影{{ movieA.name }}是: {{ movieIsSuccess }}</p>
  <p>使用统计方法：电影{{ movieA.name }}是：{{ movieIsSuccessFun() }}</p>
  <button @click="adjustMovie()">调整电影</button>
  <h1>票房 {{ movieA.piaofang }}</h1>
  <h1>{{ test }}</h1>
  <input v-model="test" />

  <div>
    <h1>习题</h1>
    <p>语文：<input placeholder="150" @keyup.enter"submit" type="number" v-model="Chinese"></p>
    <p>数学：<input placeholder="150" @keyup.enter"submit" type="number" v-model="Math"></p>
    <p>英语：<input placeholder="725" @keyup.enter"submit" type="number" v-model="English"></p>
    <p>总分：{{ computedSum }}</p>
    <p>平均分：{{ computedAverag }}</p>
  </div>

  <div>
    <input v-model="score" type="number"/>
    <p v-show="score >= 85">A</p>
    <p v-show="score >= 70 && score < 85"> B </p>
    <p v-show="score >= 60 && score < 70"> C </p>
    <p v-show="score < 60">D</p>
    <p v-for="build in build">{{ build }}</p>

    <p v-for="(student,index) in student" :key="student.id">
      <span style="color: aqua;">{{ index + 1 }}</span> 
      <span style="color: brown;">{{ student.name }}</span>
      <span style="color:blueviolet ;">LIVE IN</span><span  style="color:bisque ;">{{ student.live }}</span>
    </p>
  </div>
  <div>
    <p v-for="(value,key,index) in movieA">
      {{ index + 1 }} kEY IS {{ key }} VALUE IS {{ value }}
    </p>

  </div>
  <div>
    <div>
      <table border="1">
        <thead>
                <tr>
                    <th v-for="(column, key) in studentInfoKeys" :key="key">
                        {{ column }}({{ key }})
                    </th>
                    <th>操作</th>
                </tr>
        </thead>
        <tbody>
                <tr v-for="studentInfo in studentInfos" :key="studentInfo.id">
                    <td v-for="(column, key) in studentInfoKeys" :key="key">
                        <span v-if="column == '成绩'">
                            <span v-show="studentInfo[key] >= 60">及格</span>
                            <span v-show="studentInfo[key] < 60">挂科</span>
                        </span>
                        <span v-else>
                            {{ studentInfo[key] }}
                        </span>
                    </td>
                    <td>
                        <!-- <button v-permission="who" >查看</button>
                        <button v-permission="who" style="color: blue;">修改</button>
                        <button v-permission="who" style="color: red;">删除</button> -->
                        <button v-auth="who">查看</button>
                        <button v-auth="who" style="color: blue;">修改</button>
                        <button v-auth="who" style="color: red;">删除</button>
                    </td>
                </tr>
            </tbody>

      </table>
      <input placeholder="午时已到TAB" @keyup.tab="submit">
    </div>
  </div>



  <!-- <p v-model="score" type="number"/> -->

<!-- <div>

  <input v-model="tests",>
</div>
<h2 v-custom:parameter.click="message">{{ message }}</h2> -->
</template>

<style scoped>

</style>





<!-- <script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style> -->